---
title: TikTok Pixel
description: Measure ad performance and build audiences for TikTok advertising campaigns.
lastModified: 2025-09-24

icon: tiktok
---

TikTok Pixel is TikTok's conversion tracking and audience targeting tool. It measures ad effectiveness, tracks user actions, and helps optimize your TikTok advertising campaigns. By default, c15t loads this script based on `marketing` consent.

This script persists after consent is revoked because it has built-in consent management. When consent changes, c15t updates TikTok's internal consent state rather than removing the script entirely.

## Implementation

### Adding the script to c15t

<Tabs items={['JavaScript', 'React', 'Next.js + App Router', 'Next.js + Pages Router']}>
  <Tab value="JavaScript">
    ```ts
    import { configureConsentManager } from 'c15t';
    import { tiktokPixel } from '@c15t/scripts/tiktok-pixel';

    configureConsentManager({
      // ... 
      scripts: [
        tiktokPixel({
          pixelId: '123456789012345',
        }),
      ],
    });
    ```
  </Tab>

  <Tab value="React">
    ```tsx
    import { tiktokPixel } from '@c15t/scripts/tiktok-pixel';
    import { ConsentManagerProvider } from '@c15t/react';

    export function App({ children }: { children: React.ReactNode }) { 
      return (
        <ConsentManagerProvider
          options={{
            scripts: [
              tiktokPixel({
                pixelId: '123456789012345',
              }),
            ],
          }}
        >
          {children}
        </ConsentManagerProvider>
      );
    }
    ```
  </Tab>

  <Tab value="Next.js + App Router">
    ```tsx
    'use client';
    import { tiktokPixel } from '@c15t/scripts/tiktok-pixel';
    import { ClientSideOptionsProvider } from '@c15t/nextjs/client';

    export function ConsentManagerClient({ children }: { children: React.ReactNode }) { 
      return (
        <ClientSideOptionsProvider
          scripts={[
            tiktokPixel({
              pixelId: '123456789012345',
            }),
          ]}
        >
          {children}
        </ClientSideOptionsProvider>
      );
    }
    ```
  </Tab>

  <Tab value="Next.js + Pages Router">
    ```tsx
    import { tiktokPixel } from '@c15t/scripts/tiktok-pixel';
    import { ConsentManagerProvider } from '@c15t/nextjs';

    export function App({ children }: { children: React.ReactNode }) { 
      return (
        <ConsentManagerProvider
          options={{
            // ... other options
            scripts: [
              tiktokPixel({
                pixelId: '123456789012345',
              }),
            ],
          }}
        >
          {children}
        </ConsentManagerProvider>
      );
    }
    ```
  </Tab>
</Tabs>

## Types

### TikTokPixelOptions

<AutoTypeTable path="./packages/scripts/src/tiktok-pixel.ts" name="TikTokPixelOptions" />

### Script

<AutoTypeTable path="./packages/core/src/libs/script-loader/types.ts" name="Script" />
